<template>
  <div
    class="com-nav-menus"
    :class="{
      transparent: isTransparentHeader,
      'home-activity': $route.meta.hasActivityBg && !scrolled,
    }"
    v-if="!isHidePageHeader"
  >
    <div class="header-inner" v-if="!isHidePageHeader">
      <div class="nav-wrapper">
        <div class="logo-box" @click="clickLogo">
          <img v-if="isTransparentHeader" src="@/assets/img/logo-white.png" alt="" />
          <img v-else src="@/assets/img/logo.png" alt="" />
        </div>

        <PageHeaderNav :is-transparent="isTransparentHeader" />

        <PageHeaderSearch />
        <div class="search">
          <div class="search-wrapper">
            <el-dropdown class="search-dropdown" @command="handleCommand">
              <div class="search-dropdown-wrapper">
                <img v-if="isTransparentHeader" src="@/assets/img/earth-white.png" alt="" class="earth" />
                <img v-else src="@/assets/img/earth.png" alt="" class="earth" />
                简/EN
                <span class="el-dropdown-link">
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="zh">{{ $t('中文') }}</el-dropdown-item>
                <el-dropdown-item command="en">{{ $t('英文') }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>

        <PageHeaderAvatar :is-transparent="isTransparentHeader" />

        <!-- <div v-else class="btns">
          <div class="btn login" @click="showDialog('login')">{{ $t('登录') }}</div>
          <div class="btn register" @click="showDialog('register')">{{ $t('注册') }}</div>
        </div> -->
      </div>
    </div>
    <div class="header-inner newheight" ref="viewtools" v-if="isHidePageHeader">
      <div class="nav-wrapper">
        <router-link to="/" tag="div" class="logo-box">
          <img v-if="isTransparentHeader" src="@/assets/img/logo-white.png" alt="" />
          <img v-else src="@/assets/img/logo.png" alt="" />
        </router-link>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex';
import PageHeaderAvatar from './PageHeaderAvatar.vue';
import { throttle } from 'lodash';

import PageHeaderNav from './PageHeaderNav.vue';
import PageHeaderSearch from './globalSearch/index.vue';

export default {
  components: {
    PageHeaderAvatar,
    PageHeaderNav,
    PageHeaderSearch
  },
  data () {
    return {
      scrolled: false // 页面是否滚动距离 >5
    };
  },
  computed: {
    ...mapGetters({
      token: 'token',
      isHidePageHeader: 'isHidePageHeader'
    }),
    // 是否登录
    isLogin () {
      return !!this.token;
    },

    // 首页头部透明
    isTransparentHeader () {
      return this.$route.name === 'Index' && !this.scrolled;
    }
  },

  mounted () {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll);
  },
  created () {},
  methods: {
    ...mapMutations({ changeLanguage: 'system/CHANGE_LANGUAGE' }),

    // 下拉选择, 切换语言
    handleCommand (lang) {
      console.info('lang: ', lang);
      // 暂时注释，2021年12月17日再上
      // this.changeLanguage(lang);
      // this.$i18n.locale = lang;
    },
    clickLogo () {
      window.location = process.env.VUE_APP_COSWEBURL + '/';
    },
    handleScroll: throttle(
      function () {
        if (this.$route.name !== 'Index' && !this.$route.meta.hasActivityBg) return;
        this.scrolled = document.documentElement.scrollTop > 5;
      },
      300,
      { leading: true, trailing: true }
    ),

    showDialog (type) {
      if (type === 'login') {
        this.$dialogLogin.show();
      } else if (type === 'register') {
        // this.$dialogRegister.show();
        // this.$sensors.track('daohe_index_register');
        // this.$router.push({ name: 'RegistrationType' });
        this.$router.replace('/registration');
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/styles/global-variables.scss";

$blue: #2b86dd;
.com-nav-menus {
  transition: all 0.3s;
  position: fixed;
  z-index: 1899;
  left: 0;
  top: 0;
  right: 0;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(187, 187, 187, 0.2);

  .header-inner {
    position: relative;
    // width: 100%;
    min-width: 1200px;
    padding: 0 20px;
    .nav-wrapper {
      display: flex;
      .logo-box {
        display: flex;
        flex: 1;
        align-items: center;
        user-select: none;

        > img {
          width: auto;
          height: 52px !important;
        }
      }
    }
  }
  .newheight{
    height: 80px;
    padding-top: 14px;
  }
  // 首页展示透明头部
  &.transparent {
    background-color: transparent;

    .search {
      .search-wrapper {
        .el-dropdown {
          color: #fff;
        }

        .eath {
          color: #fff !important;
        }
      }
    }

    .btns {
      .login {
        background-color: #fff;
        color: #1890ff;
      }

      // .register {
      // }
    }
  }

  &.home-activity {
    background-color: rgba(255, 255, 255, 0.7);
  }
}

.search {
  display: flex;
  margin-left: 20px;
  color: #333;
  align-items: center;

  .search-wrapper {
    display: flex;
    font-size: 18px;
    align-items: center;

    .search-dropdown {
      .search-dropdown-wrapper {
        display: flex;
        cursor: pointer;
        font-size: 18px;
        align-items: center;

        .earth {
          width: 14;
          margin-right: 4px;
        }
      }
    }
  }
}

::v-deep .el-icon-arrow-down::before {
  width: 10px;
  height: 6px;
  color: #2b86dd;
}

.btns {
  display: flex;
  align-items: center;
  margin-left: 40px;
  margin-right: 40px;
  .btn {
    transition: all 0.3s;
    height: 34px;
    padding: 0 30px;
    margin-right: 20px;
    // border: 1px solid #41464b;
    border-radius: 2px;
    cursor: pointer;
    font-family: PingFangSC-Regular, PingFang SC;
    font-size: 16px;
    line-height: 34px;
    color: #fff;
  }

  .login {
    background: #41464b;

    &:hover {
      background: #4c4f54;
      // color: rgba(255, 255, 255, 0.8);
    }
  }

  .register {
    background: #2b86dd;

    &:hover {
      background: #288eea;
    }
  }
}
</style>
